<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>md5</title>
    <script type="text/javascript" src="md5.js"></script>
    <style>
        button {
            width: 30%;
            height: 30px;
            cursor: pointer;
        }

        #mainCnt {
            margin-left: auto;
            margin-right: auto;
            width: 80%;
	    text-align:center;
	    <!-- border: solid 1px red; -->
            <!-- width: 500px; -->
            <!-- height: 500px; -->
        }

        #mainCnt form {
            margin-left: auto;
            margin-right: auto;
	    <!-- border: solid 1px green; -->
	    <!-- width: 60%; -->
        }

        #mainCnt form input {
            width: 70%;
	    height:20px;
        }

        #mainCnt form .labelCnt {
            width: 70%;
            margin-left: auto;
            margin-right: auto;
	    text-align:left;
	    <!-- border: solid 1px blue; -->
	}

        .btnCnt {
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
	    //ok
            document.getElementById("btnOK").onclick = function btnOKOnclick() {
                //alert("hello");
                var inputVal1 = document.getElementById("inputText1").value.trim();
                var inputVal2 = document.getElementById("inputText2").value.trim();
		if ( inputVal1.length && (inputVal1 === inputVal2))
		{
		    var outputLenText = document.getElementById("outputLen").value.trim();
		    var outputLen = parseInt(outputLenText);
		    var md5Text = hex_md5(inputVal1);
		    if ( outputLen < md5Text.length)
			document.getElementById("outputText").value = md5Text.substring(0,outputLen);
		}
	    }
	    //clear
	    document.getElementById("btnCancel").onclick = function btnCancelOnclick(){
		document.getElementById("inputText1").value = "";
		document.getElementById("inputText2").value = "";
                document.getElementById("outputText").value = "";

            }
        }
    </script>
</head>

<body>
<div id="mainCnt">
    <form>
	<div class = "labelCnt"> Input: </div>
        <input type="text" name="inputText" id = "inputText1"><br>

	<div class = "labelCnt"> Input again: </div>
        <input type="text" name="inputText" id = "inputText2"><br>

	<div class = "labelCnt"> Output: </div>
	<input type="text" name="outputText" id = "outputText"><br>
	<div class = "labelCnt"> Length: </div>
        <input type="text" name="outputLen" id = "outputLen" value = "10">
    </form>
    <br>
    <div class="btnCnt">
        <button id="btnOK">OK</button>
        <button id="btnCancel">Clear</button>
    </div>
</div>
</body>
</html>

